<script lang="ts" setup>
// 使用 ts 语言，不然会报错
import {ref} from 'vue'
import type {ButtonProps} from './types'
// import { buttonProps } from './types';
// 表示 接收数据
import Icon from '../Icon/Icon.vue';

withDefaults(defineProps<ButtonProps>(),{
  nativeType:'button'
})
// defineProps(ButtonProps)

const _ref = ref<HTMLButtonElement>()

defineExpose({
  button:_ref
})

</script>
<template>
  <!-- 一直存在的class,和 动态存在的 class 们 -->
  <button
  ref="_ref"
  class="wf-button"
  :class="{
    [`wf-button--${type}`]:type, 
    [`wf-button--${size}`]:size,
    [`wf-button--${nativeType}`]:nativeType,
    'is-plain':plain,
    'is-round':round,
    'is-circle':circle,
    'is-disabled':disabled || loading,
    'is-loading':loading,
  }"
  :disabled="disabled"
  :type="nativeType"
  :autofocus="autofocus"
  >
  <Icon icon="spinner" spin v-if="loading"/>
  <Icon :icon="icon" v-if="icon"/>
  <span>
    <slot></slot>
  </span>
  </button>
</template>
<style >
.wf-button{
  --main-bg-color:yellow;
  
  /* background-color: var(--hh); */
}
</style>